/**
 * 右键菜单View控件，包含基本的右键菜单操作，多数的组件已经实现了右键菜单增强，通常不需要自行进行菜单的引用
 * @class ngc.component.view.MenuView
 */
define(["module/component/views/CommonUIView"], function(CommonUIView) {
	var _attachMenuULTemplate = '<ul id="{{id}}" class="ui-menu res_component_menu"></ul>';
	var MenuView = CommonUIView.extend({
		template: ngc.compile(_attachMenuULTemplate),
		/**
		 * @method 初始化右键菜单，当所有菜单全部添加完毕之后执行初始化方法
		 * @param {Object} area 右键菜单的作用区域，可以为jquey对象或者选择器字符串
		 * @param {Object} conf 可选参数，菜单初始化的相关菜单事件绑定，忽略此参数时，所有的菜单处理需要采用监听的方式进行
		 */
		initMenu:function(area,conf){
			if(conf)
				this.setOptionConfig(conf);
			
			this.getComponentObject().menu();
			this.getComponentObject().parent().hide();	
			if(ngc.isString(area)){
				area = $(area);
			}
			this._initMenuDom(area);
			//p.contextMenu(id,conf||{});
		},	
		
		/**
		 * @method 刷新右键菜单，当菜单初始化方法执行之后，重新添加菜单项的时候需要调用此方法进行菜单刷新
		 */
		refreshMenu:function(){
			var menu = $('body #zte_res_contextMenu');
			menu.unbind();
			menu.chirldren("ul").remove();
			this.getComponentObject().menu();
		},
		
		_initMenuDom:function(p){
			var that = this,conf = this.getOptionConfig();
			if($('body #zte_res_contextMenu').length==0){
				$('<div id="zte_res_contextMenu"></div>').hide().css({
					position : 'absolute',
					zIndex : '1999'
				}).appendTo('body').bind('click', function(e) {
					e.stopPropagation();
				});
			}

			$(p).bind(
					'contextmenu',function(e){
						var bShowContext = (!!conf.onContextMenu) ? conf.onContextMenu(e) : true;
						
						if (bShowContext){
							
							that._displayMenu(e['pageX'],e['pageY'],this);
						}
						return false;	
					});
			
		},
		
		_displayMenu:function(x,y,trigger){
			
			var menu = $('body #zte_res_contextMenu');
			
			$(document).one('click', function(){
				menu.hide('normal');
			});
			
			
			if($('body #zte_res_contextMenu ul').attr("id")==this.getComponentId()){
				
				$('body #zte_res_contextMenu').css({
					'left' : x,
					'top' : y
				});
				$('body #zte_res_contextMenu').show('normal');
				if($('body #zte_res_contextMenu ul').children('li:visible').length==0){
					menu.hide();
				}
				return;
			}
			
			var content = this.getComponentObject().clone(true),that = this;
			menu.unbind();
			menu.html(content);
			
			$.each(this.getOptionConfig().bindings, function(id, func) {
				$('#' + id, $('body #zte_res_contextMenu')).bind('click', function(e) {
					menu.hide('normal');
					func(trigger, that, id);
				});
			});
			menu.css({
				'left' : x,
				'top' : y
			}).show('normal');
			if($('body #zte_res_contextMenu ul').children('li:visible').length==0){
				menu.hide();
				return;
			}
			$(document).one('click', function(){
				menu.hide('normal');
			});
		},
		
		/**
		 * @method 添加多个菜单项
		 * @param [Array] 菜单数组，数组内元素的格式形如{id:'tree33',label:'子菜单3',icon:'fa-pencil-square-o',parent:'tree21',index:1},参数描述参见addMenu方法
		 */
		addMenus:function(opt){
			if(!opt){
				ngc.error("init menu must set menus config!");
				return;
			}				
			var that = this;
			$.each(opt,function(i){
				that.addMenu(this.id,this.label,this.index,this.icon, this.parent);
			});
			
		},
		getDefineMenuId:function(id){
			return id.replace(this.getMenuIdPrefix(),'');
		},
		getRelMenuId:function(id){
			return this.getMenuIdPrefix()+id;
		},
		getMenuIdPrefix:function(){
			return this.getComponentId()+'_';
		},
		
		/**
		 * @method 隐藏右键菜单上面的菜单项
		 * @param {String} [id] 表示要隐藏的菜单项ID，当忽略此参数时候表示隐藏整个右键菜单
		 * 
		 */
		hideMenu:function(id){
			if(!id){
				$('body #zte_res_contextMenu li').hide();
				this.$("li").hide();
				return;
			}
				
			$('body #zte_res_contextMenu').find("li#"+this.getMenuIdPrefix()+id).hide();	
			this.$("li#"+this.getMenuIdPrefix()+id).hide();
		},
		/**
		 * @method 显示右键菜单上面的菜单项
		 * @param {String} [id] 可选参数，表示要显示的菜单项ID，当忽略此参数时候表示显示整个右键菜单所有菜单项
		 * 
		 */
		showMenu:function(id){
			if(!id){
				$('body #zte_res_contextMenu li').show();
				this.$("li").show();
				return;
			}
			$('body #zte_res_contextMenu').find("li#"+this.getMenuIdPrefix()+id).show();	
			this.$("li#"+this.getMenuIdPrefix()+id).show();
		},
		
		/**
		 * @method 显示右键菜单上面的菜单项
		 * @param {String} id 表示要添加的菜单项ID
		 * @param {String} label 表示要添加的菜单项名称
		 * @param {Number} [index] 可选参数，表示要添加的菜单项的位置，该位置从1开始
		 * @param {String} [ico] 可选参数，表示要使用的图标，此处使用awesome矢量图标，具体图标参见http://www.fontawesome.com.cn/faicons/#form-control
		 * @param {String} [parent] 可选参数，表示当前菜单添加到的父节点
		 */
		addMenu:function(id,label,index,ico,parent){
			var _p = parent?this.$("#"+this.getMenuIdPrefix()+parent):this.getComponentObject();
			if(parent){
				if(_p.children("ul").length==0){
					_p.append('<ul class="ui-menu"></ul>');
				}
				_p = _p.children("ul:first");
			}
			
			var icon = "";
			
			if(ico){
				icon = '<i class="fa '+ico+' fa-lg" aria-hidden="true"></i>';
			}
			
			if(!index){
				_p.append('<li id="'+this.getMenuIdPrefix()+id+'"><a href="#">'+icon+'&nbsp; '+label+'</a></li>');		
			}else{
				var apd = _p.children("li").eq(index-1);
				if(apd.length==0){
					apd = _p.children("li:last");
				}
				apd.before('<li id="'+this.getMenuIdPrefix()+id+'"><a href="#">'+icon+'&nbsp; '+label+'</a></li>');
			}
				
		}

	});
	
	return MenuView;

})